<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>node+rtsp</title>
	</head>

	<body>
		<div>
			<canvas id="canvas" style='width:450px;height:350px'></canvas>
			<div id="pauseBtn" style="z-index: 2; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; max-width: 75px; max-height: 75px; margin: auto; opacity: 0.7; cursor: pointer; display: none;">
				<svg style="max-width: 75px; max-height: 75px;" viewBox="0 0 200 200" alt="Play video">
					<circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"></circle>
					<polygon points="70, 55 70, 145 145, 100" fill="#fff"></polygon>
				</svg>
			</div>
		</div>
		<div class="btns">
			<button id="btn1">链接1</button>
			<button id="btn2">链接2</button>
			<button id="btn3">链接3</button>
			<button id="btn4">链接4</button>
			<button id="btn5">链接5</button>
		</div>
		<script src="./jquery-3.6.1.min.js"></script>
		<script src="./jsmpeg.min.js"></script>
		<script>
			$(function() {
				//此处的ws就是本机器的scoket地址和端口
				console.log(location.hostname)
				var player = null
				var index = 0
				var timeTest = null
				var rtspUrl = [
					'http://'+location.hostname+':8001/rtspData?rtspUrl=rtsp://admin:df123456@192.168.110.239//Streaming/Channels/101',
					'http://'+location.hostname+':8001/rtspData?rtspUrl=rtsp://admin:taike@2020@192.168.80.63//Streaming/Channels/101',
					'http://'+location.hostname+':8001/rtspData?rtspUrl=rtsp://admin:taike@2020@192.168.80.64//Streaming/Channels/101',
					'http://'+location.hostname+':8001/rtspData?rtspUrl=rtsp://admin:taike@2020@192.168.80.65//Streaming/Channels/101',
					'http://'+location.hostname+':8001/rtspData?rtspUrl=rtsp://admin:taike@2020@192.168.80.66//Streaming/Channels/101'
				]
				$('.btns').on('click','button',function(){
					// 清除上一个定时器
					if(timeTest != null){
						clearInterval(timeTest)
					}
					// 销毁上一个JSMpeg对象
					if(player != null){
						player.destroy()
					}
					index = $(this).index()
					// 创建XML请求
					let xhr = new XMLHttpRequest();
					// 给node发送一个get请求
					xhr.open("get",rtspUrl[index])
					xhr.send()
					xhr.onload = function(){
						// 接受返回的node数据
						console.log(xhr .responseText);
						var data = JSON.parse(xhr.responseText)
						// 创建JSMpeg对象，并通过socket接受直播流
						player = new JSMpeg.Player('ws://'+location.hostname+':'+data.data, {
							canvas: document.getElementById('canvas'),
							autoplay: true,//是否自动播放
							loop: true,
						});
						// 调用定时器
						interTime()
					}
				})
				// 用定时器定时去请求，告诉node，当前直播在观看
				function interTime() {
					timeTest = setInterval(function(){
						let xhr = new XMLHttpRequest();
						xhr.open("get",rtspUrl[index])
						xhr.send()
					}, 5000)
				}
			})
		</script>
	</body>
</html>
